<template>
  <div id="app">
    <div class="left">
      <div class='top'>
        <P>列表</P>
        <p class="you" @click="isShow = !isShow"><span>新增</span></p>
        <ul class="zengli">
          <li v-for="(item,index) in list" v-show="isShow" @click="add(index)">{{item.type}}</li>
        </ul>
      </div>
      <table>
        <tr>
          <th></th>
          <th>类型</th>
          <th>号码/账号</th>
          <th>提示内容</th>
          <th>操作</th>
        </tr>
       <main-list v-for="(item,index) in addlist" 
          :id="item.id" 
          :type="item.type" 
          :tro="item.tro"
          :num="item.num"
          @del="del"
          @changetro="changetro"
        ></main-list>
      </table>

    </div>
    <div class="right">
      <ul>
        <icon-list v-for="(item,index) in addlist" 
        :id="item.id" 
        :tro="item.tro"
        :icon="item.icon"
        :iconclass="item.iconclass"
        ></icon-list>
      </ul>
    </div>
  </div>
</template>

<script>
    import listdata from '../mock/index';
    import mainList from '@/components/mainList';
    import iconList from '@/components/iconlist';

    export default {
        name: 'App',
        components: {
            mainList,
            iconList
        },
        data() {
            return {
                list: listdata,
                isShow: false,
                addlist: []
            }
        },
        methods: {
            add(index) {
                let ind = this.list.findIndex(item => item.id == index);
                if(this.addlist.findIndex(i => i.id== ind) !=-1){
                    return 
                }
                this.addlist.push(this.list[ind])
            },
            del(index){
                // console.log(index)
                let ind = this.addlist.findIndex(item => item.id == index);
                // console.log(ind)
                this.addlist.splice(ind,1)
            },
            changetro(id,tro){
                let ind = this.addlist.findIndex(item => item.id == id);
                this.addlist[ind].tro = tro;
            }
        },
    }
</script>

<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 20px;
    }
    
    #app {
        width: 80%;
        height: auto;
        display: flex;
        border: 1px solid #ccc;
        margin: 0 10%;
    }
    
    .left {
        width: 80%;
        height: 100%;
    }
    
    .top {
        position: relative;
        margin: 10px 0;
    }
    
    .you {
        text-align: end;
    }
    
    .zengli {
        position: absolute;
        right: 45px;
        top: 40px;
        border: 1px solid #ccc;
        background: gray;
        color: #fff;
    }
    
    .zengli li {
        border-bottom: 1px solid #ccc;
        text-align: center;
    }
    
    .right {
        width: 20%;
        height: 100%;
        text-align: center;
    }
    
    table,
    tr {
        width: 100%;
    }
    
    table tr th {
        width: 20%;
        height: 30px;
        line-height: 30px;
    }
    
    table tr th:nth-child(1) {
        width: 5%;
    }
    
    table tr th:nth-child(4) {
        width: 25%;
    }
</style>